// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { } from 'antd-mobile-rn';

// 引入 处理数据 所需文件
import { } from './module.js'

// 引入样式
import Style from './style.js';

// 引入公用组件
import { CacheImage } from '../../components/index.js'
import { CategoryGood, List } from '../../router/Mall/components/index.js'

// 引入工具包
import { } from '../../util/images.js';
import { press, size, ScreenWidth, borderBottom, pathHead, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../util/utils.js'

class CategoriesGoods extends Component {

	constructor(props) {
		super(props);
		this.state = {
			offset: [],
			active: 0,
			scrollTop: 0
		};
	}

	componentDidMount() {

	}


	measureElement(element, callback) {
		element.measure((x, y, width, height, left, top) => {
			callback(x, y, width, height, left, top)
		})
	}

	scrollTo(element, index) {
		this.isScroll = false
		this.setState({
			active: index
		})
		this.scroll.scrollTo({ x: 0, y: this.state.offset[index].layout.y, animated: true })
	}

	contentScroll(event) {
		const { offset } = this.state
		if (this.isScroll) {
			var scrollTop = event.nativeEvent.contentOffset.y
			var offsetHeight = event.nativeEvent.contentSize.height
			var windowHeight = event.nativeEvent.layoutMeasurement.height
			this.scrollWindowHeight = event.nativeEvent.layoutMeasurement.height
			var offsetTop = 0;
			this.scrollTop = event.nativeEvent.contentOffset.y
			for (let i = 0; i < offset.length; i++) {
				if (scrollTop + windowHeight >= offset[i].layout.y) {
					this.setState({
						active: i
					})
					continue;
				}
			}

			if (scrollTop <= 10) {
				this.setState({
					active: 0
				})
			}
			if (scrollTop + windowHeight >= offsetHeight - 10) {
				this.setState({
					active: offset.length - 1
				})
			}
		}
	}

	animationEend() {
		this.isScroll = true
	}

	getMenu() {
		const { categoryList } = this.props
		return categoryList.records.map((item, index) => (
			<TouchableOpacity
				key={index}
				// onPress={() => { this.scrollTo(`title${i}`, i) }}
				onPress={() => {
					console.log(index)
					this.setState({
						active: index
					})
				}}
				style={[{
					width: 100,
					height: 38,
					padding: 0,
					paddingLeft: 15,
					borderWidth: 0,
					borderBottomWidth: .5,
					borderColor: '#DCDEE3',
					borderRightWidth: .5,
				}, this.state.active == index ? {
					paddingLeft: 13,
					borderWidth: 0,
					borderRightWidth: 0,
					borderLeftWidth: 2,
					borderLeftColor: '#000',
					backgroundColor: '#fff'
				} : null]}
			>
				<Text allowFontScaling={false} style={{
					fontSize: 12,
					color: '#61676F',
					lineHeight: 16,
					marginTop: 12,
				}}>{item.categoryName}</Text>
			</TouchableOpacity >
		))
	}

	getProducts(list) {
		const { navigate, state } = this.props.navigation;
		return list.map((item, i) => {
			return (
				<TouchableOpacity onPress={() => { navigate('ProductList', { typeid: item.Id }) }} key={i}>
					<View style={Style.product}>
						<View style={Style.productPicWarp}>
							{/* <Image
				resizeMode='contain'
				style={Style.productPic}
				source={require('../../static/images/product-pic.png')}
			  /> */}
						</View>
						<Text allowFontScaling={false} style={Style.productName}>{item.Name}</Text>
					</View>
				</TouchableOpacity>
			)
		})
	}

	getContent() {
		const { categoryList, select, onSelect } = this.props
		const { active } = this.state

		return <CategoryGood width={ScreenWidth - 100} select={select} onSelect={onSelect} backgroundColor="#fff" data={categoryList.records[active]} />

		// <View key={i} style={Style.productView} ref={`title${i}`} onLayout={({ nativeEvent: e }) => this.layout(e, `title${i}`)}>
		//   <View style={Style.productTitleView}>
		//     <Text allowFontScaling={false} style={Style.productTitleText} >{item.Name}</Text>
		//   </View>
		//   <View style={Style.productContentView}>
		//     {this.getProducts(item.children)}
		//   </View>
		// </View>
	}

	layout = (e, index) => {
		let offset = this.state.offset;
		offset.push(e)
		this.setState({
			offset
		}, () => {
		})
	}

	render() {
		return (
			<View style={{
				flex: 1,
			}}>
				<ScrollView
					showsVerticalScrollIndicator={false}
					style={{
						width: 100,
						backgroundColor: '#eee',
						position: 'absolute',
						left: 0,
						top: 0,
						bottom: 0,
					}}
				>
					{this.getMenu()}
				</ScrollView>
				<ScrollView
					showsVerticalScrollIndicator={false}
					style={[Style.content, {
						marginLeft: 100,
						flexDirection: 'row',
					}]}
				// ref={(c) => { this.scroll = c }}
				// onScroll={(event) => { this.contentScroll(event) }}
				// onMomentumScrollEnd={(event) => { this.animationEend() }}
				>
					{this.getContent()}
				</ScrollView>
			</View>
		);
	}
}


export default connect(({ user, categoryList }) => ({
	user, categoryList
}))(pureRender(CategoriesGoods))
